<template>
  <div class="new" v-if="homenpd.length">
    <div class="titleWrapper">
      <van-icon class="title" name="new-arrival" size="3rem" color="#f5cc00" />
      <van-icon style="position: relative;left: 67vw;" name="exchange" color="#aaa" />
    </div>
    <div class="itemsWrapper">
      <div class="wrapper-for" v-for="(item,index) in homenpd" :key="index" data-index="3">
        <div @click="gotoinfo(item.id)" class="itemWrapper">
          <div class="imageWrapper">
            <img class="image" :src="item.img">
          </div>
          <div>
            <span class="img-name" v-text="item.name"></span>
            <span class="originPrice" v-text="'￥' + item.original_price"></span>
            <span class="price" v-text="'￥' + item.selling_price"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'newPds',
    methods: {
      ...mapMutations(['SET_HOME_NPD']),
      gotoinfo(id) {
        router.push({
          path: '/Details/' + id
        })
      },
      New_goods() {
        this.$api.homeData.goods_gethomeinfo(4, 3).then(res => {
          this.SET_HOME_NPD(res.data)
        })
      }
    },
    computed: {
      ...mapState(['homenpd'])
    },
    created() {
      this.New_goods()
    }
  }
</script>

<style>
  .new {
    padding: 2%;
    margin: auto;
    width: 90vw;
    height: 45vw;
    border-radius: 0.625rem;
    background-image: linear-gradient(to right, #f4ece0, #eff4e0);
  }

  .titleWrapper {
    position: relative;
    margin: 0 0.625rem 0.625rem 0.625rem;
    height: 1.5625rem;
  }

  .title {
    display: inline-block;
    border-left: 4px #3cb963 solid;
    padding-left: 0.3125rem;
    height: 1.3125rem;
    line-height: 1.3125rem;
    vertical-align: middle;
    font-size: 1.1875rem;
  }

  .actionStateText {
    display: inline-block;
    vertical-align: middle;
    line-height: 0.875rem;
    font-size: 0.875rem;
    border-radius: 3px;
    padding: 0.15625rem;
    /*border: 1px solid #FE3824;*/
    color: #FE3824;
    margin-left: 0.3125rem;
  }

  .actionStateTextEnd {
    display: inline-block;
    vertical-align: middle;
    line-height: 0.875rem;
    font-size: 0.875rem;
    border-radius: 3px;
    padding: 0.15625rem;
    border: 1px solid #999;
    color: #666;
    margin-left: 0.3125rem;
  }

  .more {
    position: absolute;
    top: 0;
    right: 0;
    height: 1.5625rem;
    line-height: 1.5625rem;
    font-size: 0.875rem;
    color: #2EB257;
  }

  .itemsWrapper {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  .itemsWrapper::-webkit-scrollbar {
    display: none
  }

  @media screen and (min-width: 0px) and (max-width: 320px) {
    .itemWrapper {
      width: 33%;
    }
  }

  .imageWrapper {
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    margin-bottom: 0.625rem;
    position: relative;
  }

  .image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.625rem;
  }

  .img-name {
    font-size: 0.8125rem;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .originPrice {
    font-size: 0.6875rem;
    color: #999999;
    text-decoration: line-through;
  }

  .price {
    position: relative;
    font-size: 0.6875rem;
    color: #FE6263;
  }

  .wrapper-for {
    display: inline-block;
    padding: 0 0.3125rem;
    margin: 0 0.5rem;
    white-space: normal;
    width: 28%;
  }
</style>
